{% extends "public/layout.html" %}

{% block breadcrumb %}
     <ol class="breadcrumb">
        <li>
            <a href="{% url 'index' %}">仪表盘</a>
        </li>
         <li>
             <a>任务管理</a>
         </li>
        <li class="active">
            <strong>查看任务</strong>
        </li>
    </ol>
{% endblock %}
{% block body %}
    <div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5> 查看任务 </h5>
                </div>

                <div class="ibox-content">

                    <div class="">
                        <form id="search_form" method="get" action="" class="pull-right mail-search">
                            <div class="input-group">
                                <input type="text" class="form-control input-sm" id="search_input" name="search_keywords" placeholder="项目名|更新详情|版本描述">
                                <div class="input-group-btn">
                                    <button id='search_btn' type="submit" class="btn btn-sm btn-primary">
                                        -搜索-
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <table class="table table-striped table-bordered table-hover " id="editable" >
                        <thead>
                            <tr>
                                <th class="text-center">任务名称</th>
                                <th class="text-center">Playbook</th>
                                <th class="text-center">执行状态</th>
                                <th class="text-center">执行结果</th>
                                <th class="text-center">执行时间</th>
                                <th class="text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for task in page_obj.object_list %}
                            <tr class="gradeX {{ task.id }}">
                                <td class="text-center">{{ task.name }}</td>
                                <td class="text-center"> {{ task.playbook }} </td>
                                <td id="" class="text-center"><span id="status_{{ task.id }}" class="label {% ifequal task.status 'Y' %}label-success{% else %}label-danger{% endifequal %}">{{ task.get_status_display }}</span> </td>
                                <td id="exec_result_{{ task.id }}" class="text-center"> {% for result in task.execresult_set.all %}{{ result.host }}&nbsp;&nbsp;&nbsp;&nbsp;不可达:{{ result.unreachable }}&nbsp;&nbsp;跳过:{{ result.skipped }}&nbsp;&nbsp;成功：{{ result.ok }}&nbsp;&nbsp;改变:{{ result.changed }}&nbsp;&nbsp;失败:{{ result.failures }}<br /> {% endfor %} </td>
                                <td class="text-center"> {{ task.exec_time}} </td>
                                <td class="text-center">
                                        <button type="button"  data-id="{{ task.id }}" id="{{ task.id }}" class="btn btn-xs btn-info btn-execute" {% if task.status == 'Y' %}disabled{% endif %}>执行</button>
                                        <a href="{% url 'auto_tasks:exec_detail' %}?task_id={{ task.id }}" class="btn btn-xs btn-success">详情</a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="dataTables_info" id="editable_info" role="status" aria-live="polite">
                                显示 [{{ p.count }}] 条数据中的 第 [{{ page_obj.start_index }}] 至 [{{ page_obj.end_index }}] 的数据
                            </div>
                        </div>
                        {% include 'public/paginator.html' %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block js %}
    <script type="text/javascript">

        $('.btn-execute').click(function () {
            var task_id = $(this).attr('data-id');
            $.ajax({
                type: 'POST',
                url: "{% url 'auto_tasks:task_execute' %}",
                data: {'task_id': task_id},
                success: function (data) {
                    console.log(data, typeof(data));
                    if(data['task_status'] == 'Y'){
                        console.log('Y，执行过了');
                        $('#'+String(task_id)).attr("disabled", "disabled");
                        var result_val = '';
                        $.each(data['task_exec_result'], function (k,v) {
                            console.log(k, v);
                            result_val += k + '  不可达: '+ v['unreachable'] + '  跳过:' + v['skipped'] + '  成功:' + v['ok'] + '  改变:' + v['changed'] + '  失败:'+ v['failures'] +'\n';
                            console.log(result_val);
                        });
                         document.getElementById('exec_result_'+ String(task_id)).innerText = result_val;
                         document.getElementById('status_'+ String(task_id)).innerText = '已执行';
                         document.getElementById('status_'+ String(task_id)).setAttribute('class', 'label label-success');
                    }

                }
            })
        })
    </script>
{% endblock %}
